<template>
  <div style="margin: 5em">
    <div style="text-align: center; margin-bottom: 3em; font-size: 1.5em">
      <strong>重置密码</strong>
    </div>
    <el-steps :active="active" finish-status="success">
      <el-step title="填写邮箱"></el-step>
      <el-step title="设置密码"></el-step>
      <el-step title="完成"> </el-step>
    </el-steps>
    <div style="padding: 3em">
      <div v-if="active == 1">
        <el-form
          :model="emailForm"
          label-width="20%"
          :rules="emailRules"
          ref="emailForm"
        >
          <el-form-item label="邮箱" prop="email">
            <el-input
              placeholder="请填写跟账号关联的已验证过的邮箱地址"
              v-model="emailForm.email"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: center"
            ><el-button type="primary" size="medium" @click="submitEmail"
              >提交</el-button
            ></el-form-item
          >
          <el-alert type="success" title="请根据邮件中的操作验证邮箱，如果没收到邮件(注意检查是否被放到垃圾邮件中了)，请隔一段时间再次验证。"
           v-show='showSuccess'></el-alert>
        </el-form>
      </div>
      <div v-if="active == 2">
        <el-form
          :model="passwordForm"
          :rules="passwordRules"
          ref="passwordForm"
        >
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model.trim="passwordForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <!-- 如果不在两个el-form-item之间添加这个，确认密码的rule不会生效，原因不明 -->
          <el-form-item label="test" v-if="1==2">
            <el-input type="password"></el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="passwordConfirm">
            <el-input
              type="password"
              v-model.trim="passwordForm.passwordConfirm"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="medium" type="primary" @click="resetPassword"
              >提交</el-button
            >
            <el-button size="medium" @click="resetForm">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active == 3" style="color: darkgreen">
        <i class="fa fa-check-circle-o"></i> 现在你可以用新的密码登录了
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不能为空"));
      }
      let reg = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
      if (!reg.test(value)) {
        return callback(new Error("邮箱格式不正确"));
      }
      callback();
    };
    var checkPasswordConfirm = (rule, value, callback) => {
      if (value != this.passwordForm.password) {
        return callback(new Error("两次密码不一致"));
      }
      callback();
    };
    return {
      showSuccess:false,
      active: 1,
      token:"",
      emailForm: {
        email: "",
      },
      emailRules: {
        email: [{ validator: checkEmail, trigger: blur }],
      },
      passwordForm: {
        password: "",
        passwordConfirm: "",
      },
      passwordRules: {
        password: [{ required: true, message: "不能为空", trigger: 'blur' }],
        passwordConfirm: [
          { required: true, message: "不能为空", trigger: 'blur' },
          { validator: checkPasswordConfirm, trigger: blur },
        ],
      },
    };
  },
  mounted() {
    if (this.$route.query.token) {
      this.token=this.$route.query.token
      this.active = 2;
    }
  },
  beforeDestroy(){
    this.$message.closeAll()
  },
  methods: {
    submitEmail() {
      this.$refs.emailForm.validate((valid) => {
        if (valid) {
          this.$http
            .post("users/reset_password_email/", this.emailForm)
            .then(() => {
              // this.$message({
              //   showClose: true,
              //   message:
              //     "请根据邮件中的操作验证邮箱，如果没收到邮件(注意检查是否被放到垃圾邮件中了)，请隔一段时间再次验证。",
              //   type: "success",
              //   duration:0,
              //   offset: 50,
              // });
              this.showSuccess=true
            });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.passwordForm.resetFields();
    },
    resetPassword() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          let data={
            password:this.passwordForm.password,
            password_confirm:this.passwordForm.passwordConfirm,
            token: this.token,
            email: this.$route.query.email
          }
          this.$http.post("/users/reset_password_confirm/", data).then(()=>{
            this.active=3
          })
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>